<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<title>我的技能😯</title>
		<link rel="stylesheet" type="text/css" href="../css/skill.css"/>
		<style type="text/css">
			/*#header p{
				float: right;
			}*/
		</style>
		
		<script type="text/javascript" src="../js/iscroll/iscroll.js"></script>
		<script type="text/javascript" src="../js/iscroll/zeptojs.min.js"></script>

		
	
	</head>
	<body onload="loaded()">
		<div id="header">
			我的技能
			<!--<p>返回欢迎页</p>-->
		</div>
		<div id="wrapper">
			<div id="scroller">
				<ul>      
					<!--<li>
						<img src="../images/test.jpg" />
						<div>
							<h3>Pretty row 1</h3>
							<p>Pretty row 1Pretty row 1Pretty row Pretty row 1Pretty row Pretty row Pretty row 1Pretty rPretty row 1Pretty row 1Pretty row Pretty row 1Pretty row Pretty row Pretty row 1Pretty row 1ow 1Pretty row 1Pretty row 1Pretty row Pretty row 1Pretty row Pretty row Pretty row 1Pretty row 1</p>
						</div>
					</li>
							-->
				</ul>
			</div>
		</div>
	</body>
	<script type="text/javascript">
			var myScroll;
			function loaded () {
				myScroll = new IScroll('#wrapper', { bounceEasing: 'elastic', bounceTime: 1200 });
			}
			
			document.addEventListener('touchmove', function (e) { e.preventDefault(); }, isPassive() ? {
				capture: false,
				passive: false
			} : false);
			
			//载入数据
			$.ajax({
	        type:'GET',
//	        url:'http://192.168.1.103/resume/mock/skill.json',
	        url:'http://localhost:8000/api/skill.php',
	        dataType:'json',
	        success:function(data){
	            var html = "";
	            for(var i=0;i<data.length;i++){
	                html +="<li>" 
			                + '<img src="../images/test.jpg" />'
			                + '<div>' 
			                		+ '<h3>' + data[i].category + '</h3>'
			                		+ '<p>' + data[i].name + '</p>'
			                		+ '</div>'
		                 + "</li>";
	            }
	            $("#scroller ul").html(html);
	        }
	    })
		</script>
</html>